<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    列表渲染     表格    v-for    {{}}

    1.v-for指令写在什么位置   循环标签上
    2.v-for 指令需要使用 item in items 形式的特殊语法，
        其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名
    3.v-for 还支持一个可选的第二个参数，即当前项的索引

    4.为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key
      建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单
-->
<div id="app">
    <h2>{{title}}</h2>
    <h2>遍历字符串</h2>
    <ul>
        <li v-for="(char,index) in msg">{{char}}--{{index}}</li>
    </ul>
    <hr>
    <h2>遍历字符串数组</h2>
    <ul>
        <li v-for="(name,index) in names">{{name}}--{{index}}</li>
    </ul>
    <hr>
    <h2>遍历对象</h2>
<!--    遍历对象时 第一个参数表示对象的属性值,第二个是可选参数 表示对象属性名-->
    <ul>
        <li v-for="(val,attr) in user">{{val}}--{{attr}}</li>
    </ul>
    <hr>
    <h2>遍历对象数组</h2>
    <ul>
        <li v-for="(usr,index) in users" :key="index">{{usr.username}}-- {{usr.password}}</li>
    </ul>

    <hr>
    <table border="1px" cellspacing="0" width="80%">
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>年龄</th>
        </tr>
        <tr v-for="student in students">
            <td v-for="val in student">{{val}}</td>
        </tr>
    </table>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            title: 'v-for 实现列表渲染',
            msg: 'hello',
            names:['tom','jack','lucy'],
            user: {
                username: 'tom',
                password: '123456'
            },
            users:[
                {
                    username: 'tom1',
                    password: '111111'
                },
                {
                    username: 'tom2',
                    password: '222222'
                },
                {
                    username: 'tom3',
                    password: '333333'
                }
            ],
            students:[
                {
                    studentName:'tom1',
                    studentNo:"20241207001",
                    age:20
                },
                {
                    studentName:'tom2',
                    studentNo:"20241207002",
                    age:30
                },{
                    studentName:'tom1',
                    studentNo:"20241207001",
                    age:20
                },
                {
                    studentName:'tom2',
                    studentNo:"20241207002",
                    age:30
                }
            ]

        },
        methods: {}
    })
</script>
</body>
</html>